<template>
    <div>
        <van-nav-bar title="订单管理" left-text="返回" left-arrow @click-left="back" />

        <div class="bg">

            <div class="address" @click="showAddress">
                <div @click="">选择地址<van-icon name="arrow" /></div>
                <div style="font-size: 15px;" >
                    {{ defaultAddress.name }} {{ defaultAddress.tel }}</div>
                <div>{{ defaultAddress.address }}</div>
            </div>
        </div>

        <!-- 弹出层 -->
        <!-- 底部弹出 -->
        <!-- v-model:show="showBottom" -->
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '50%' }">

            <!-- 地址列表 -->
            <div class="list">
                <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd"
                    @select="demo3" />
            </div>
        </van-popup>
        <div class="bg2">
            <div class="order-info">
                <div style="font-size: 16px;margin-left: 10px;color: #000;">
                    订单信息</div>
                <van-swipe-cell v-for="(item, index) in shopcart">
                    <div class="order">
                        <div class="img-box">
                            <img :src="item.small_img" alt=""
                                style="width:105px ; border-radius: 10px; height: 90px;margin-left: 5px;" />
                        </div>
                        <div style="flex: 2; overflow-y: auto;padding-top: 10px;padding-left: 12px;">
                            <div style="font-size: 16px;">{{ item.name }}</div>
                            <div style="padding-top: 3px;">{{ item.enname }}</div>
                            <div style="padding-top: 15px;">{{ item.rule }}</div>
                        </div>
                        <div>
                            <div
                                style="padding-top: 25px; text-align: center;font-size: 16px;padding-right: 20px;color: #4055bd;">
                                ￥{{ item.price }}</div>
                            <div style="margin-top: 20px;margin-left: 40px;">
                                X{{ item.count }}</div>
                        </div>
                    </div>
                </van-swipe-cell>
            </div>
        </div>

        <div class="bg3">
            <div style="">
                <div style="margin-left: 10px;">
                    <div >{{ date }}</div>
                </div>
                <div style="margin-left: 10px;margin-top: 3px;">
                    <div style="display: inline;">共计6件</div>
                    <div style="display: inline;margin-left:220px ;">合计￥168</div>
                </div>
            </div>

        </div>

        <!-- 结算 -->
        <div class="settlement">
            <van-button block round @click="paybox">立即结算</van-button>
        </div>
    </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { ref } from 'vue';
import { get } from '../request';

export default {
    setup() {
        
        const date = ref('2021-11-29');

        const paybox = () => {
            router.push({ name: 'MyOrder' })
        }
        //返回
        const back = () => {
            router.push({ name: 'Shopbag' })
        }
        const showAddress = () => {
            router.push({ name: 'Address' })
        }

        const router = useRouter();
        const chosenAddressId = ref();
        //默认展示地址
        const defaultAddress = ref({})
        const list = ref([]);

        //新增地址
        const onAdd = () => {
            router.push({ name: 'Address' });
        }

        //查询地址信息
        const findAddress = async () => {
            const res = await get('/findAddress', {
                params: {
                    tokenString: JSON.parse(localStorage.getItem('tokens')),
                }
            })
            res.data.result.forEach((v, index) => {
                let aa = `${v.province}${v.city}${v.county}${v.addressDetail}`
                v.address = aa
                list.value.push(v)
                v.id = index + 1
            })
            list.value.forEach((item) => {
                //找到默认地址
                if (item.isDefault == 1) {
                    chosenAddressId.value = item.id
                    defaultAddress.value = item
                }
            })
            console.log("地址信息", res);
        }
        findAddress()

        //点击切换地址
        const demo3 = (e) => {
            console.log("当前选中的地址", e);
            defaultAddress.value = e
        }


        const showBottom = ref(true);
        const route = useRoute();
        //获取购物车携带sid
        const Sids = ref(route.query.id)
        console.log(Sids.value)

        //查询订单页面商品
        const shopcart = ref([])
        const commitShopcart = async (sids) => {
            const res = await get('/commitShopcart', {
                params: {
                    tokenString: JSON.parse(localStorage.getItem('tokens')),
                    sids
                }
            })
            shopcart.value = res.data.result
            console.log("订单页面商品", res)
        }
        commitShopcart(JSON.stringify(Sids.value))

        return {
            demo3,
            defaultAddress,
            onAdd,
            showBottom,
            chosenAddressId,
            list,
            back,
            shopcart,
            showAddress,
            date,
            paybox

        }
    }
}

</script>

<style lang="less" scoped>
.settlement {
    position: absolute;
    bottom: 10px;
    width: 90%;
    margin-left: 15px;;
}

.settlement .van-button--default {
    color: #fff;
    background: linear-gradient(to right, #404dd9, #182078);
    border: none;
}

.order {
    flex: 1;
    overflow-y: scroll;
    display: flex;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
}

.bg3 {
    border-radius: 18px;
    position: relative;
    padding-top: 20px;
    left: 0;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, );
    margin-top: 1px;
    
}

.bg2 {
    border-radius: 18px;
    position: relative;
    padding-top: 20px;
    left: 0;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, );
    margin-top: 10px;
}

.bg {
    border-radius: 15px;
    position: relative;
    left: 0;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, );


}



/deep/.van-address-item__edit {
    display: none;
}

.address {
    line-height: 35px;
    margin-top: 10px;
    margin-left: 15px;
}
</style>